<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>xterm</title>
    <link rel="stylesheet" href="/static/xterm/xterm.css" />
    <link rel="stylesheet" href="/static/xterm/addons/fullscreen/fullscreen.css" />
</head>
<style>
    body {
        padding-bottom: 30px;
    }
    .reverse-video {
        color: #000;
        background: #f0f0f0;
    }
</style>
</head>
<body>

<div id="terms"></div>
</body>
<!--xterm.js 文档：https://xtermjs.org/docs/api/addons/fullscreen/  -->
<script src="/static/xterm/xterm.js" ></script>
<script src="/static/xterm/addons/fullscreen/fullscreen.js" ></script>
<script>
    var socket = new WebSocket('ws://localhost:8080/web_shell');

    socket.onopen = function () {
        Terminal.applyAddon(fullscreen)
        var term = new Terminal();

        term.open(document.getElementById('terms'));
        term.toggleFullScreen();

        term.on('data', function (data) {
            console.log(data);
            socket.send(data);
        });

        socket.onmessage = function (msg) {
            console.log(msg);
            console.log(msg.data);
            term.write(msg.data);
        };
        socket.onerror = function (e) {
            console.log(e);
        };

        socket.onclose = function (e) {
            console.log(e);
            term.destroy();
        };
    };

</script>
</html>